#list>header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);

  >p {
    padding-right: 2rem;
  }
}

#listTools {

  li {
    i {
      pointer-events: none;
    }

    &::after {
      content: attr(aria-label);
    }
  }

  &.playlist {

    #clearListBtn,
    #removeFromListBtn,
    #sortCollectionBtn,
    #sortByTitleBtn,
    #sortByArtistBtn,
    #shareCollectionBtn,
    #radioCollectionBtn,
    #renameCollectionBtn,
    #deleteCollectionBtn {
      display: none
    }
  }


  &.channel {
    li {
      display: none;
    }

    #subscribeListBtn,
    #viewOnYTBtn {
      display: block !important;
    }
  }

  &.reserved {
    li {
      display: none;
    }

    #clearListBtn,
    #removeFromListBtn {
      display: block !important;
    }
  }

  &.favorites,
  &.listenLater {
    li {
      display: block !important;
    }

    #deleteCollectionBtn,
    #renameCollectionBtn,
    #radioCollectionBtn,
    #importListBtn,
    #subscribeListBtn,
    #viewOnYTBtn {
      display: none !important;
    }

  }

  &.collection {

    #clearListBtn,
    #importListBtn,
    #subscribeListBtn,
    #viewOnYTBtn {
      display: none;
    }

  }

  &.supermix,
  &.shared {
    li {
      display: none;
    }

    #importListBtn,
    #enqueueAllBtn {
      display: block !important;
    }
  }
}

#listContainer {
  width: 92%;

  &.reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

#viewOnYTBtn,
#subscribeListBtn {
  i {
    &:after {
      content: attr(data-state);
      font-family: inherit;
    }
  }
}
